<template>
        <el-button class="mt-4" style="" @click="dialogVisible=true" type="success">新增</el-button>
        <el-input placeholder="按教号搜索" v-model="idd" type="text" style="width: 140px"/><el-button type="primary" @click="searchbyid">搜索</el-button>
    <el-select v-model="iscollege" placeholder="请选择查询的学院" clearable>
        <el-option label="数学与计算机学院" value="数学与计算机学院" />
        <el-option label="法学院" value="法学院" />
        <el-option label="文学院" value="文学院" />
    </el-select>
        <el-button type="primary" @click="searchbycollege">搜索</el-button>
    <el-table :data="datas.slice((pageNum-1)*pageSize,pageNum*pageSize)" style="width: 100%" max-height="250" border>
        <el-table-column fixed label="序号" width="200">
            <template #default="scopes">
                {{ scopes.$index+1 }}
            </template>
        </el-table-column>
        <el-table-column fixed prop="tid" label="教号" width="200" />
        <el-table-column fixed prop="tname" label="姓名" width="200" />
        <el-table-column prop="sex" label="性别" width="200" />
        <el-table-column prop="college" label="学院" width="200" />
        <el-table-column prop="grade" label="年级" width="200" />
        <el-table-column prop="tel" label="联系电话" width="200" />
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <div v-if="store.auth.role!='学生'">
                    <el-button
                            link
                            type="primary"
                            size="small"
                            @click.prevent="deleteRow(scope.$index)"
                    >
                        删除
                    </el-button>
                    <el-button
                            link
                            type="primary"
                            size="small"
                            @click.prevent="getStuByid(scope.$index)"
                    >
                        修改
                    </el-button>
                </div>
                <div v-if="store.auth.role=='学生'">无操作权限</div>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination
                background
                layout="sizes,prev,pager,next,jumper,->,total"
                :page-size.sync="pageSize"
                :current-page.sync="pageNum"
                :page-sizes="[2,5,8,10,15]"
                :total="totals"
                :hide-on-single-page="true"
                @current-change="getList"
                @size-change="getList1"
        />
    </div>
    <div>{{test}}</div>
    <el-dialog title="填写信息" v-model="dialogVisible">
        <el-form :model="stu">
            <el-input placeholder="教号" v-model="stu.tid" type="text" />
            <el-input placeholder="姓名" v-model="stu.tname" type="text" />
            <el-radio-group  v-model="stu.sex" class="ml-4">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
            </el-radio-group>
            <el-select v-model="stu.college" placeholder="请选择学院" clearable class="full">
                <el-option label="数学与计算机学院" value="数学与计算机学院" />
                <el-option label="法学院" value="法学院" />
                <el-option label="文学院" value="文学院" />
            </el-select>
            <el-select v-model="stu.grade" placeholder="请选择年级" clearable class="full">
              <el-option label="2018级" value="2018级" />
              <el-option label="2019级" value="2019级" />
                <el-option label="2020级" value="2020级" />
                <el-option label="2021级" value="2021级" />
                <el-option label="2023级" value="2023级" />
            </el-select>
            <el-input placeholder="联系电话" v-model="stu.tel" type="text" />
            <el-button type="warning" @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" @click="add">确认</el-button>
        </el-form>
    </el-dialog>
    <el-dialog title="修改信息" v-model="dialogVisibles">
        <el-form :model="stus">
            <el-input placeholder="教号" v-model="stus.tid" type="text" disabled/>
            <el-input placeholder="姓名" v-model="stus.tname" type="text" />
            <el-radio-group  v-model="stus.sex" class="ml-4">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
            </el-radio-group>
            <el-select v-model="stus.college" placeholder="请选择学院" clearable class="full">
                <el-option label="数学与计算机学院" value="数学与计算机学院" />
                <el-option label="法学院" value="法学院" />
                <el-option label="文学院" value="文学院" />
            </el-select>
            <el-select v-model="stus.grade" placeholder="请选择年级" clearable class="full">
              <el-option label="2018级" value="2018级" />
              <el-option label="2019级" value="2019级" />
                <el-option label="2020级" value="2020级" />
                <el-option label="2021级" value="2021级" />
                <el-option label="2023级" value="2023级" />
            </el-select>
            <el-input placeholder="联系电话" v-model="stus.tel" type="text" />
            <el-button type="warning" @click="dialogVisibles=false">取消</el-button>
            <el-button type="primary" @click="adds">确认</el-button>
        </el-form>
    </el-dialog>

</template>

<script setup>
import { ref,onMounted } from 'vue'
import {ElMessage} from 'element-plus'
import { get,post } from '@/utils/request.js'
import { reactive } from 'vue'
import {userStore} from '@/stores/counter.js'

const datas=ref([])
const dialogVisible=ref(false)
const dialogVisibles=ref(false)
const num=ref('')
const idd=ref('')
const iscollege=ref('')
const store=userStore()
const types=ref('')
const totals=ref('')
const pageNum=ref(1)
const pageSize=ref(2)
const test=ref('')

const stu = reactive({
tid:'',
name:'',
sex:'',
college:'',
grade:'',
tel:''
})

const stus = reactive({
tid:'',
name:'',
sex:'',
college:'',
grade:'',
tel:''
})


  get('/teacher/getTeaInfo',(message)=>{
  for(let i=0;i<message.length;i++){
  if(message[i].sex==1){
  message[i].sex='男'
  }else  message[i].sex='女'
  }
    datas.value = message
    totals.value=message.length
    },(message)=>{
    ElMessage.warning(message)
    })



const deleteRow = (index) => {
post('/teacher/deletetea',{
tid:datas.value[index].tid
},(message)=>{
ElMessage.success(message)
num.value=index
datas.value.splice(index, 1)
},(message)=>{
ElMessage.warning(message)
})
}

const add=()=>{
post('/teacher/addtea',{
tid:stu.tid,
tname:stu.tname,
sex:stu.sex,
college:stu.college,
grade:stu.grade,
tel:stu.tel
},(message)=>{
ElMessage.success(message)
dialogVisible.value = false
datas.value.push({
tid:stu.tid,
tname:stu.tname,
sex:stu.sex,
college:stu.college,
grade:stu.grade,
tel:stu.tel
  })
stu.tid='',
stu.tname='',
stu.sex='',
stu.college='',
stu.grade='',
stu.tel=''
},(message)=>{
ElMessage.warning(message)
dialogVisible.value = false
stu.tid='',
stu.tname='',
stu.sex='',
stu.college='',
stu.grade='',
stu.tel=''
})
}

const getStuByid=(index)=>{
post('/teacher/geteabyid',{
tid:datas.value[index].tid
},(message)=>{
dialogVisibles.value=true
stus.tid=message.tid
stus.tname=message.tname
if(message.sex=='1')
stus.sex='1'
else stus.sex='2'
stus.college=message.college
stus.grade=message.grade
stus.tel=message.tel
},(message)=>{
ElMessage.warning(message)
})
}

const searchbyid=()=>{
post('/teacher/geteabyid',{
tid:idd.value
},(message)=>{
  if(message.sex==1){
  message.sex='男'
  }else  message.sex='女'
datas.value = []
datas.value.push(message)
idd.value=''
},(message)=>{
idd.value=''
ElMessage.warning(message)
})
}

const searchbycollege=()=>{
post('/teacher/geteabycollege',{
college:iscollege.value
},(message)=>{
for(let i=0;i<message.length;i++){
  if(message[i].sex==1){
  message[i].sex='男'
  }else  message[i].sex='女'
  }
datas.value = []
datas.value.push(message)
iscollege.value=''
},(message)=>{
iscollege.value=''
ElMessage.warning(message)
})
}

const adds=()=>{
post('/teacher/updatetea',{
tid:stus.tid,
tname:stus.tname,
college:stus.college,
grade:stus.grade,
tele:stus.tel,
sex:stus.sex
},(message)=>{
ElMessage.success(message)
dialogVisibles.value = false
datas.value.splice(num,1,stus)
},(message)=>{
ElMessage.warning(message)
dialogVisibles.value = false
})
}

const getList=(pageNums)=>{
pageNum.value=pageNums
}

const getList1=(pageSizes)=>{
pageSize.value=pageSizes
}


</script>
<style>
    .full{
    display:block;
    }
</style>
